<style lang="less">
 @import "../style/variables.less";
  .header{
    width: 100%;
    background: @color;
    color:#fff;
    height: 50px;
    line-height: 50px;
    position: fixed;
    left: 0;
    top:0;
    padding:0 15px;
    z-index: 100;
    span,a{
      color:#fff;
      margin: 0 5px;
      transition:all .5s;
      transform:rotate(0deg);
      -webkit-transform: rotate(0deg);
      &.vertical-nav{
        transform:rotate(-90deg);
        -webkit-transform: rotate(-90deg);
      }
    }
  }
  .left-button{
    font-size: 18px;
    span{
      padding: 5px;
      margin:0;
    }
  }
  .curtain{
    position: fixed;
    display: none;
    left:0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,.5);
    transition:all .5s;
    z-index: 101;
    opacity: 0;
    &.curtain-show{
      display: block;
      opacity: 1;
    }
  }
</style>
<template>
  <div>
    <header class="header clearfix" >
      <div class="left-button left">
        <span class="toggle-news-type fa fa-navicon" v-touch:tap="showSidebar" :class="{'vertical-nav':isShow}"></span>
        <span>{{categoryName?categoryName:'首页'}}</span>
      </div>
      <div class="right-button right">
        <div v-if="categoryName">
          <span class="fa fa-plus-circle"></span>
        </div>
        <div v-else>
          <span class="remind fa fa-bell"></span>
          <span class="simple-set fa fa-ellipsis-v"></span>
        </div>
      </div>
    </header>
    <sidebar :isShow="isShow" v-touch:swipeleft="hideSidebar"></sidebar>
    <div class="curtain" :class="{'curtain-show': isShow}"></div>
    <router-view></router-view>
  </div>
</template>
<script type="text/javascript">
import Sidebar from './sidebar'
  export default {
    name:'news-list',
    data() {
      return {
        isShow: false,
        categoryName: ''
      }
    },
    methods:{
      showSidebar() {
        this.isShow = true
        this.$store.dispatch('changeScroll')
      },
      hideSidebar() {
        this.isShow = false;
        this.$store.dispatch('changeScroll')
      }
    },
    components:{
      Sidebar
    }
  }
</script>
